<template>
  <el-dialog
    title="选择移动标签"
    :visible.sync="$attrs.visable"
    width="700px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="cardbox">
      <div class="card-header bg_f9 plr-16 flex aligncenter">
        <el-form
          ref="queryParams"
          :model="queryParams"
          size="small"
          :inline="true"
        >
          <el-form-item label="" prop="keyword" class="mb-0 mr-0">
            <el-input
              placeholder="搜索标签"
              v-model="queryParams.keyword"
              @keyup.enter.native="handleQuery"
              class="x-input-select"
              style="width: 200px"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="card-wrapper p-16">
        <div v-for="(item, index) in lableOpt" :key="index">
          <div class="c_text3 f-12 mb-8">{{ item.label }}</div>
          <div class="labellist mb-16">
            <div
              v-for="(child, key) in item.children"
              :key="key"
              class="tagng f-12 mr-8 mb-8 commhover"
              :class="{ active: child.checked }"
              @click="handleSelect(child)"
            >
              {{ child.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleClose"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      queryParams: {
        keyword: "",
      },
      lableOpt: [
        {
          value: 1,
          label: "可可爱爱啊",
          children: [
            { name: "卡哇伊", id: 1, checked: false },
            { name: "一般", id: 2, checked: false },
            { name: "可呜呜", id: 3, checked: false },
          ],
        },
        {
          value: 2,
          label: "客户等级2",
          children: [
            { name: "卡哇伊1", id: 4, checked: false },
            { name: "一般2", id: 5, checked: false },
            { name: "可呜呜3", id: 6, checked: false },
          ],
        },
      ],
      selectList: [],
    };
  },
  props: {
    ids: {
      type: Array,
      default: [],
    },
  },
  created() {
    // console.log("type:", this.type);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleQuery() {},

    handleSelect(item) {
      item.checked = !item.checked;
      if (item.checked) {
        // this.selectList.forEach
        let filterList = this.selectList.filter((i) => i.id == item.id);
        if (!filterList.length) {
          this.selectList.push(item);
        }
      } else {
        this.selectList.forEach((child, index) => {
          if (child.id == item.id) {
            this.selectList.splice(index, 1);
          }
        });
      }
      console.log('this.selectListL',this.selectList)
    },
  },
};
</script>
<style lang="scss" scoped>
.cardbox {
  border: 1px solid #e9e9e9;
}
.card-header {
  height: 44px;
}
.card-wrapper {
  max-height: 420px;
  overflow-y: auto;
}
.labellist {
  .tagng {
    display: inline-block;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    line-height: 20px;
    padding: 3px 8px;

    &.active {
      color: #2f54eb;
      border-color: #2f54eb;
      background-color: #fff;
    }
  }
}
</style>
